<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <div id="container">
          <div class="header">
            <span style="float: left;">若依IM聊天界面</span>
            <span id="mtime" style="float: right;"></span>
          </div>
          <ul class="content" v-html="newHtml">

          </ul>
          <div class="footer">
            <div id="user_face_icon">
              <img src="@/views/im/image/t2.jpg" alt="">
            </div>
            <input id="messageText" type="text" placeholder="说点什么吧...">
            <span id="btn" @click="sendMsg()">发送</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import "@/views/im/tio/im.css";
  import {
    tio
  } from "@/views/im/tio/tiows";
  // import {
  //   getRandomName
  // } from "@/views/im/tio/name";
 import t1 from "@/views/im/image/t1.jpg"
 import t2 from "@/views/im/image/t2.jpg"
  export default {
    name: "User",
    data() {
      return {
        // 遮罩层
        loading: true,
        ws_protocol: 'ws', // ws 或 wss
        ip: '127.0.0.1',
        port: 9326,
        heartbeatTimeout: 5000, // 心跳超时时间，单位：毫秒
        reconnInterval: 1000, // 重连间隔时间，单位：毫秒
        binaryType: 'blob', // 'blob' or 'arraybuffer';//arraybuffer是字节
        myself: 0,
        mtime: "",
        myname: "",
        tiows: null,
        newHtml:'',
      };
    },
    watch: {

    },
    created() {
      this.initWs()
      setInterval(this.showTime, 1000);
    },
    methods: {
      onopen(event, ws) {
        // ws.send('hello 连上了哦')
        //document.getElementById('contentId').innerHTML += 'hello 连上了哦<br>';
      },
      onmessage(event, ws) {
        var data = event.data;
        var msgBody = eval('(' + data + ')');
        var ico, imgcls, spancls, nickcls;

        if (this.myname == msgBody.name) {
          ico = t2;
          imgcls = "imgright";
          spancls = "spanright";
          nickcls = "nickright";
        } else {
          ico = t1;
          imgcls = "imgleft";
          spancls = "spanleft";
          nickcls = "nickleft"
        }
        //myself=!myself;
        if (msgBody.name == "helper") {
          this.newHtml += '<li><div class="sysinfo">' + msgBody.message + '</div></li>';
        } else {
          this.newHtml += '<li><img src="' + ico + '" class="' + imgcls + '"><span class="' + nickcls + '">' +
            msgBody.name + '</span><span class="' + spancls + '">' + msgBody.message + '</span></li>';
        }

        //document.getElementById('contentId').innerHTML += data + '<br>'
        // content.scrollTop = content.scrollHeight;

        // this.newHtml=content.innerHTML;
      },

      onclose(e, ws) {
        // error(e, ws)
      },
      onerror(e, ws) {
        // error(e, ws)
      },
      ping(ws) {
        // log("发心跳了")
        ws.send('心跳内容')
      },
      randomNum(minNum, maxNum) {
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
          case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
          default:
            return 0;
            break;
        }
      },
      showTime() {
        var myDate = new Date();
        var m = myDate.getMinutes();
        if (m < 10) m = "0" + m;
        var s = myDate.getSeconds();
        if (s < 10) s = "0" + s;
        this.mtime = myDate.getHours() + ":" + m + ":" + s;
        document.getElementById("mtime").innerText = this.mtime;
      },
      sendMsg() {
        var msg = document.getElementById('messageText');
        this.tiows.send(msg.value);
        msg.value = "";
      },
      clearMsg() {
        document.getElementById('contentId').innerHTML = ''
      },
      initWs() {
        // this.myname = getRandomName();
        var queryString ='token='+getToken();
        var param = "{}";
        this.tiows = new tio(this.ws_protocol, this.ip, this.port, queryString, param,
          this.onopen,
          this.onmessage,
          this.onclose,
          this.onerror,
          this.ping,
          this.heartbeatTimeout,
          this.reconnInterval,
          this.binaryType)
        this.tiows.connect()
      }
    }
  };
</script>
